.checkbox {
  display: block;

  .wrapper {
    .itemBtn {
      line-height: 22px;
      position: relative;
      display: inline-block;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      background-image: none;
      border: 1px solid transparent;
      box-shadow: 0 2px rgba(0, 0, 0, 0.015);
      cursor: pointer;
      user-select: none;
      height: 24px;
      padding: 0 15px;
      font-size: 14px;
      border-radius: 4px;
      color: rgba(0, 0, 0, 0.65);
      border-color: #d9d9d9;
      min-width: 60px;
      border-radius: 0;
      &:hover {
        color: #558cff;
        background-color: rgba(85, 140, 255, .1);
      }
      &:not(:first-child) {
        margin-left: -1px;
      }
      &:first-child {
        border-radius: 12px 0 0 12px;
      }
      &:last-child {
        border-radius: 0 12px 12px 0;
      }
      &.highlight {
        color: #fff;
        border-color: #558cff;
        background-color: #558cff;
        &:hover {
          opacity: .8;
        }
        &:not(:first-child) {
          border-left-color: #fff!important;
        }
      }
      &.itemBtnDisabled:not(.highlight) {
        border-color: #b5b5b5;
        background-color: rgba(191, 191, 191, 0.2);
        color: #b5b5b5;
        &:hover, &:focus {
          border-color: #b5b5b5;
          background-color: rgba(191, 191, 191, 0.2);
          color: #b5b5b5;
        }
      }
      &.itemBtnDisabled.highlight {
        opacity: 0.8;
      }
    }

    .newItemBtn {
      z-index: 222;
      &:first-child {
        border-radius: 3px 0 0 3px;
      }
      &:last-child {
        border-radius: 0 3px 3px 0;
      }
      &:not(:first-child) {
        border-left: 1px solid transparent;
      }
      &:hover {
        color: rgba(0, 0, 0, 0.65);
        background-color: #fff;
        border-left: 1px solid #d9d9d9;
        z-index: 22;
      }
      &.highlight {
        color: #558cff;
        border: 1px solid #558cff;
        background-color: rgba(85, 140, 255, 0.1);
        &:hover {
          color: #558cff;
          border: 1px solid #558cff;
          opacity: 1;
          z-index: 222;
        }
        &:not(:first-child) {
          border-left-color: #558cff!important;
          border-right-color: #558cff!important;
        }
      }
    }

  }
}

:global {
  .widthEqual {
    width: 108px;
  }
}
